<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: chocolate;
        /* padding: -50px; */
        /* padding-left: 50px; */

        /* padding: 50px 100px 150px 200px; */

        /* padding-left: 50px; */
      }

      span {
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>padding属性</span>
    </div>
  </body>
</html>

<!-- 
  padding内间距(内填充)
   
    在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白

    默认情况下，添加padding是会是元素变大的，需要手动减去padding的值
    padding改变的是内容到元素边缘的位置关系
    padding是有背景色的

    单一方向加padding
      padding-top
      padding-bottom
      padding-left
      padding-right

    padding也可以写多个参数
      一个参数： 上下左右
      二个参数： 上下  左右
      三个参数： 上  左右  下
      四个参数： 上  右  下  左

    padding是不能加负数的
 -->
